iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
1

拍謝今天比較 tired 所以更新比較 less la,開頭補一下這句 XD。

廢話不多說用 CLI 先終端機執行 npm install -g @vue/cli

結束後先去一個空資料夾,像我是建了一個 vscode專案 的空資料夾,隨便啦,接著執行 vue create 專案名稱,然後終端機會讓你設定一些內容,以下是我的配置。

區區的部落格系統,基本上這樣已經可以完成大部分需求了,以後有卡關我們再來研究。

https://ithelp.ithome.com.tw/upload/images/20200915/20129819uZnuZLbskA.png

建立好專案後,會告訴你進入資料夾開啟 server,我們照做後讓他跑。

https://ithelp.ithome.com.tw/upload/images/20200915/20129819k7lWpoWZd4.png

如此即可先在本機的 server 測試往後我們要做的專案。

https://ithelp.ithome.com.tw/upload/images/20200915/201298192565ugMr3R.png

先認識一下目前的專案資料夾:

https://ithelp.ithome.com.tw/upload/images/20200915/201298192PdGGga8Br.png

以現階段來說,最重要的就是我們的 src 資料夾,裡面要存放的就是我們需要自己準備的網頁開發的資源。

  • public 裡面的 index.html: 是一個被 webpack 當作模板的檔案,執行打包指令打包完後會生成dist 資料夾, 裡面會有個 index.html ,就是以 public 裡面的 index.html 為基底打包出來的,你的 CSS JS 什麼的都會經過打包通通被塞進 public 裡面的 index.html 再輸出到 dist,這是我們真正要發佈到網路上的內容。
  • asset: 放圖片什麼的
  • components: 顧名思義放組件的地方,看看官網這張圖:

https://ithelp.ithome.com.tw/upload/images/20200915/20129819IOshUKixEK.png

那一個個的綠色方塊就是一塊塊的綠豆糕,阿不是,應該說是網頁上的各個分部,可能是負責 sidebar 阿,也有可能負責顯示文章阿,啥的,想怎麼做就怎麼做,非常的自由,一個個都是 .vue 檔。

  • router: Vue Router 路由器的部分,我們在後續章節會利用 router 的部分建立我們的各個頁面,如果昨天的動態組件有了解的話,其實 router 就是 Window History API 和動態組件的結合,一切都是假象ㄏㄏ。
  • store: Vuex 的部分,把他想像成一個獨立的公用倉庫,我們可以從其他的 .vue 檔對他進行存取和操作,這次專案想想能怎麼來用用。
  • views: 畫面的 .vue 檔,比如說登入頁面阿,首頁阿,什麼的 ...
  • App.vue 的 template:
  • example.spec.js: 單元測試用的檔案
  • .browXXX .editXXX 兩個沒什麼影響
  • .eslintXXX ESLint 的使用設定
  • .gitignore babel 不用說了吧
  • jest 為單元測試設定檔,又是另一個坑 ...
  • package.json 不用說了八 ~~
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

可以看見有 router 連結的部分,router-view 就是負責顯示畫面用的,和上一章 component :is 有異曲同工之妙,具體用法請靜待往後章節。

  • main.js: 專案的進入點,我們來研究一下他的內容
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
	// 這裡是 router: router,
  router,
	// 那這就是 store: store,
  store,
  render: h => h(App)
}).$mount('#app')
  • 前面 import 就不多說了。
  • Vue.config.productionTip = false 整段貼到 Google 也有很多資訊,也不說了哈哈 XD。
  • 比較有問題的是 render 函式,這邊就是我們在建立 CLI 專案時, 會自動幫我們安裝一個 babel 插件,讓 render 支援使用 JSX 的語法,請看文件,JSX 用白話說就是 return 一個函式裡面的 HTML ,知道這樣的概念後,import App 後把整個 App 實際上是整個 App 的 template 丟到 render 函式內渲染我們的整份頁面。
  • 最後的$mount就不用說了,第二章 "比較少用的生命週期" 的部分。

大概了解上述內容後,我們的 CLI 開發方式基本就是會在 components 資料夾之中開發各種組件,接著在 views 中定義各種畫面並且引入相應的 component,然後 App.vue 就是我們最後真正要顯示的位置 ( router-view 最頂層)。

好了,現在你可以玩玩看 npm run build 看是否會有 dist 資料夾,run 完再把它刪掉 XD,點點看本機網頁的 router link、改改看 helloword 的 template、看看 router 裡面的 index.js 長什麼樣子啥的,應該可以看見一些端倪,因為昨天組件寫的有點累,所以就先熟悉一下資料夾結構就好啦 ~ 下章會是一點 Vue Router 的內容,應該啦ㄏㄏ,我要去吃點心看劇摟 (更新,是寫文的當下,現在是上班時間阿,我只是抓個空檔出來PO文黑)~~


沒事也可以逛逛我們其他團隊成員的文章啦 ~~
eien_zheng: 前端小嘍嘍的Golang學習旅程_The journey of learning Golang 系列
PollyPO技術: 前端設計轉前端工程師-JS踩坑雜記 30 天 系列
阿電: 忍住不打牌位,只要30天VueJS帶你上A牌 系列
喬依司: 實作經典 JavaScript 30 系列


上一篇
Day 06: 製作動態組件
下一篇
Day 08: Vue Router 超基本部分
系列文
Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言